$(function() {
	$('.bigBox').css({
		"animation": "boxShake 3s"
	});
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('test'));
	// 指定图表的配置项和数据
	var geoCoordMap = {
		'begin': [140, 60],
		'box1': [410, 90],
		'box2': [290, 150],
		'box3': [175, 210],
		'box4': [410, 210],
		'box5': [530, 155],
		'box6': [290, 275],
		'box7': [570, 250],
		'box8': [450, 310]
	};
	// 从bigbox处发射的线数据
	var BJData = [
		[{
			name: 'begin'
		}, {
			name: 'box1',
			value: 95
		}], [{
			name: 'begin'
		}, {
			name: 'box2',
			value: 90
		}], [{
			name: 'begin'
		}, {
			name: 'box3',
			value: 90
		}], [{
			name: 'begin'
		}, {
			name: 'box4',
			value: 90
		}], [{
			name: 'begin'
		}, {
			name: 'box5',
			value: 90
		}], [{
			name: 'begin'
		}, {
			name: 'box6',
			value: 90
		}], [{
			name: 'begin'
		}, {
			name: 'box7',
			value: 90
		}]
	];
	//var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
	var convertData = function(data) {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var dataItem = data[i];
			var fromCoord = geoCoordMap[dataItem[0].name];
			var toCoord = geoCoordMap[dataItem[1].name];
			if (fromCoord && toCoord) {
				res.push([{
					coord: fromCoord
				}, {
					coord: toCoord
				}]);
			}
		}
		return res;
	};

	// 获取图表series数据函数
	function getSeries(seriesData, _color, needOtherSeries) {
		var color = _color ? _color : 'whitesmoke';
		var img = 'pin';
		var series = [];
		
		seriesData.forEach(function(item, i) {
			var seriesOther;
			if (needOtherSeries) {
				seriesOther = {
			        name: item[0] + ' Top10',
			        type: 'lines',
			        zlevel: 2,
			        effect: {
			            show: true,
			            period: 6,
			            trailLength: 0,
			            symbol: 'image://../img/redSmoke.png',
			            symbolSize: 15
			        },
			        lineStyle: {
			            normal: {
			                color: color,
			                width: 1,
			                opacity: 0.4,
			                curveness: 0.2
			            }
			        },
			        data: convertData(item[1])
				};
				series.push(seriesOther);
			}
			series.push({
				type: 'lines',
				zlevel: 3,
				effect: {
					show: true,
					period: 6,
					trailLength: 0.7,
					color: color,
					symbolSize: 5
				},
				lineStyle: {
					normal: {
						color: color,
						width: 0.5,
						curveness: 0.2
					}
				},
				data: convertData(item[1])
			});
			series.push({
				name: item[0] + ' Top10',
				type: 'effectScatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: {
					brushType: 'stroke'
				},
				label: {
					normal: {
						show: false,
						position: 'right',
						formatter: '{b}'
					}
				},
				symbolSize: function(val) {
					return val[2] / 8;
				},
				itemStyle: {
					normal: {
						show: false,
						opacity: 0.1,
						color: color
					}
				},
				data: item[1].map(function(dataItem) {
					return {
						name: dataItem[1].name,
						value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
					};
				})
			})

		});

		var option = {
			geo: {
				label: {
					emphasis: {
						show: false
					}
				},
				roam: false
			},
			series: series
		};

		return option;
	}
	
	// 设置大盒子数据
	var bigBoxLineoption = getSeries([
		['begin', BJData]
	]);

	var timeOptions = {
		options : [
			bigBoxLineoption 
		]
	};

	// 设置盒子之间的数据
	var box1Data = [
		[{name:'box1'}, {name:'box5',value:95}]
	], box2Data = [
		[{name:'box2'}, {name:'box1',value:95}],
		[{name:'box2'}, {name:'box4',value:95}]
	], box3Data = [
		[{name:'box3'}, {name:'box2',value:95}],
		[{name:'box3'}, {name:'box6',value:95}]
	], box4Data = [
		[{name:'box4'}, {name:'box1',value:95}],
		[{name:'box4'}, {name:'box5',value:95}]
	], box5Data = [
		[{name:'box5'}, {name:'box7',value:95}]
	], box6Data = [
		[{name:'box6'}, {name:'box2',value:95}],
		[{name:'box6'}, {name:'box4',value:95}]
	], box7Data = [
		[{name:'box7'}, {name:'box4',value:95}]
	];

	(function(TP){
		
		var seriesData = [
			['box3', box3Data],
			['box6', box6Data],
			['box2', box2Data],
			['box4', box4Data],
			['box1', box1Data],
			['box5', box5Data],
			['box7', box7Data]
		];

		var boxesLineoption = getSeries(seriesData);

		TP.options.push(boxesLineoption);

	})(timeOptions);
	
	// 设置盒子box8出现时，盒子之间的新数据
	var newBox6Data = box6Data.concat([[{name:'box6'}, {name:'box8',value:95}]]);
	var newBox4Data = box4Data.concat([[{name:'box4'}, {name:'box8',value:95}]]);
	var newBox7Data = box7Data.concat([[{name:'box7'}, {name:'box8',value:95}]]);

	(function(TP){
		
		var seriesData = [
			['box3', box3Data],
			['box6', newBox6Data],
			['box2', box2Data],
			['box4', newBox4Data],
			['box1', box1Data],
			['box5', box5Data],
			['box7', newBox7Data]
		];

		var boxesLineoption = getSeries(seriesData);

		TP.options.push(boxesLineoption);

	})(timeOptions);

	// 设置红色盒子出现时，盒子之间的新数据
	var redBox3Data = [
		[{name:'box3'}, {name:'box2',value:95}]
	], redBox2Data = [
		[{name:'box2'}, {name:'box4',value:95}]
	], redBox4Data = [
		[{name:'box4'}, {name:'box5',value:95}]
	], redBox5Data = [
		[{name:'box5'}, {name:'box7',value:95}]
	];

	(function(TP){
		
		var seriesData = [
			['box3', [
				[{name:'box3'}, {name:'box6',value:95}]
			]],
			['box6', newBox6Data],
			['box2', [
				[{name:'box2'}, {name:'box1',value:95}]
			]],
			['box4', [
				[{name:'box4'}, {name:'box1',value:95}]
			]],
			['box1', box1Data],
			['box7', newBox7Data]
		];

		var boxesLineoption = getSeries(seriesData);

		var seriesData1 = [
			['box3', redBox3Data],
			['box2', redBox2Data],
			['box4', redBox4Data],
			['box5', redBox5Data]
		];

		var boxesLineoption1 = getSeries(seriesData1, '#ED1037', true);

		for (var i = 0; i < boxesLineoption1.series.length; i++) {
			boxesLineoption.series.push(boxesLineoption1.series[i]);
		}

		TP.options.push(boxesLineoption);

	})(timeOptions);
	
	// 使用刚指定的配置项和数据显示图表。
	//myChart.setOption(timeOptions);
	//
	function boxesAnimation() {
		var $header = $('#contentHeader');
		// 先绘制从bigbox中发射的线
		myChart.setOption(timeOptions.options[0]);
		
		// 然后bigbox消失，绘制boxes之间的连线
		setTimeout(function() {
			// $('.box8').hide('slow');

			
			$('.bigBox').hide('slow', 'swing', function() {
				$header.find('label').hide('slow', 'linear', function() {
					$(this).text('高性能分布式服务调用').show();
				});

				myChart.setOption(timeOptions.options[1]);

			});

			setTimeout(function() {
				$('.box8').show('slow', 'swing', function() {
					
					$header.find('label').hide('slow', 'linear', function() {
						$(this).text('自动化的弹性伸缩').show();
					});

					myChart.setOption(timeOptions.options[2]);
					
				});

				setTimeout(function() {
					$header.find('label').hide('slow', 'linear', function() {
						$(this).text('每一次分布式调用和链路，精细化剖析 ').show();
					});

					$('.box3').addClass('redCubeBox');
					$('.box7').addClass('redCubeBox');

					myChart.setOption(timeOptions.options[3]);

					setTimeout(function() {
						$('#img').slideDown('slow', 'swing');
					}, 1000);

				}, 8000);
				
			}, 8000);
			
		}, 8000);
	}
	// 初始执行
	boxesAnimation();

	// // 20秒后重新执行动画
	// setInterval(function() {
		
	// 	$('.bigBox').show('slow', 'swing', function() {
	// 		boxesAnimation();
	// 	});
	// }, 20000);
});